<template>
     <div>

        <myheader></myheader>

      <br><br>
      <!--面包屑导航-->
      <Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

      <!--<img :src="src" :width="150" fit="file">-->
      <Avatar :src="src" :width="150" fit="file"></Avatar>

      <!--上传视频地址-->
      <video id="video"  v-show="videosrc" width="300" height="200" :src="videosrc" controls="controls"
             autoplay="autoplay" muted>视频</video>

      <br>
      <Button color="red" @click="changepic">{{ mybutton }}</Button>
      <br>

      <table>
        <tr>
          <td>密码</td>
          <td><input type="text" v-model="password"></td>
        </tr>
        <tr>
          <td>确认密码</td>
          <td><input type="text" v-model="password1"></td>
        </tr>
        <tr>
          <td>上传头像文件</td>
          <td>
              <input type="file" @change="upload">
          </td>
        </tr>
        <tr>
          <td>七牛云上传</td>
          <td>
              <input type="file" @change="upload_qiniu">
          </td>
        </tr>
        <tr>
          <td>视频进度展示</td>
          <td>
              {{loadpercent}}
            <br>
            <Progress v-show="loadpercent_int" :percent="loadpercent_int" color="green">
              <span slot="title"></span>
              <span slot="text">{{loadpercent_int}}%</span>
            </Progress>
          </td>
        </tr>
        <tr>
          <td>
            <button @click="up" class="log">修改</button>
          </td>
        </tr>
      </table>

      <br><br>
      <div>
        关注商品列表：
        <Checkbox :datas="goods" v-model="good_value"></Checkbox>
        <br><br>
        <Button @click="flow" color="green">取关</Button>
      </div>

		</div>
	</section>





	<myempennage></myempennage>

  </div>
</template>

<script>
      import myheader from './myheader'
  import myempennage from './myempennage'

    export default {
        name: "myprofile",
      data () {
          return {
            //声明面包屑变量
            datas: [{title: '首页', route: {name: 'index'}}, {title: '我的首页'}],
            password: '',
            password1: '',
            src:'',
            //获取七牛上传凭证
            uptoken:'',
            //视频地址
            videosrc:'',
            //上传进度展示
            loadpercent:'',
            // 整形
            loadpercent_int:0,
            //切换按钮变量
            mybutton:'进入画中画',
            //商品所有关注列表
            goods:[],
            // 商品单个选中
            good_value:[],
            myid:{},
          }
        },

      // 注册组件标签
      components:{
        'myheader': myheader,
        'myempennage': myempennage,
      },

        mounted:function(){
          // 获取uptoken  调用
          this.get_uptoken();

          //获取用户信息
          //发送请求
          this.axios.get(
              'http://127.0.0.1:8000/userinfo/',
                {params:{uid:localStorage.getItem('uid')}}).then(res=>{
                console.log(res);
                // 赋值
                this.videosrc = 'http://q79txmm3c.bkt.clouddn.com/' + res.data.img;
            });


          //调用接口
          this.get_goods();


      },
        methods: {
          //批量操作
          flow:function(){
            console.log(this.good_value);

            var goods = [];
            for(let i=0, l=this.good_value.length; i<l; i++){
                  goods.push(this.myid[this.good_value[i]]);
                }

            //转换成字符串  赋值
            var glist = JSON.stringify(goods);
            console.log(glist);

            this.axios.get('http://127.0.0.1:8000/getflow/',
              {params: {uid: localStorage.getItem('uid'), ids:glist, type:2
              }}).then(res=>{
              console.log(res);
              this.$Message(res.data.msg);
            })
          },


          //获取关注商品
          get_goods:function(){
            this.axios.get('http://127.0.0.1:8000/uidflow/',
              {params: {'uid': localStorage.getItem('uid')
              }}).then(res=>{
                console.log(res);

                var goods = [];
                for(let i=0, l=res.data.length; i<l; i++){
                  goods.push(res.data[i].name);
                  this.myid[res.data[i].name] = res.data[i].id;
                }

                //赋值
                this.goods = goods;
                this.good_value = goods;
                console.log(goods)
              })
          },


          // 定义画中画切换
          changepic:function(){

            //判断是否处于画中画界面
            if(video !== document.pictureInPictureElement){
              //尝试进入画中画
              video.requestPictureInPicture();
              this.mybutton = '退出画中画'
            }else {
              //退出画中画
              document.exitPictureInPicture();
              this.mybutton = '进入画中画'
            }

          },


          //获取七牛凭证
          get_uptoken(){
            this.axios({
              url:'http://127.0.0.1:8000/uptoken/',
              method:'get'
            }).then(res=>{
              console.log(res);
              this.uptoken = res.data.token
            })
          },
          // 上传七牛
          upload_qiniu:function(e){

            //打印uptoken，测试有没有数据
            console.log(this.uptoken);

            //获取文件对象
            let file = e.target.files[0];
            //声明参数
            let param = new FormData();
            //将上传凭证添加参数
            param.append('token', this.uptoken);  //后端token等于this.uptoken
            //附加文件
            param.append('file', file);
            //定制axios
            const axios_qiniu = this.axios.create({withCredentials:false});  //声明withCredentials：false 不能带着cookie
            //发送请求
            axios_qiniu({
              method: 'POST',
              url:'http://up-z1.qiniu.com/',  //华北区url
              data:param,
              timeout:3000, //设置超时时间
              //设置上传进度
              onUploadProgress:(e) => {

                //设置总进度对象 已上传字节数 / 总字节数
                var complete = (e.loaded / e.total);

                //安慰剂按钮
                if(complete < 1){
                  this.loadpercent = (complete * 100).toFixed(2) + '%';

                  this.loadpercent_int = parseInt((complete * 100).toFixed(2));
                }

              }
            }).then(res=>{
              console.log(res);

              //成功后赋值  图片
              this.src = 'http://q79txmm3c.bkt.clouddn.com/' + res.data.key;  //七牛云网址加返回的key等于图片地址

              //视频地址
              this.videosrc = 'http://q79txmm3c.bkt.clouddn.com/' + res.data.key;

              this.axios.get(
              'http://127.0.0.1:8000/updateuser/',
                {params:{uid:localStorage.getItem('uid'), img:res.data.key}}).then(res=>{
                console.log(res);
            });

              //上传成功  强行100%
              this.loadpercent = '100%';
              this.loadpercent_int = 100;
            })

          },

          //修改密码
          up:function(){
            if(this.password !== this.password1){
              return this.$Message('两次密码不一致')
            }
            this.axios.get('http://127.0.0.1:8000/uploadpas/',
              {params: {uid: localStorage.getItem('uid'), password: this.password
              }}).then(res=>{
                if(res.data.code===200){
                  this.$Message(res.data.msg);
                  this.$router.push('/')
                }else {
                  this.$Message(res.data.msg)
                }
              })

          },

          // 提交
          upload:function (e) {
            //获取文件对象
            let file = e.target.files[0];
            //声明参数
            let param = new FormData();
            // 添加文件
            param.append('file', file, file.name);
            //声明请求头
            let config = {headers:{'Content-Type': 'multipart/form-data'}};

            this.axios.post(
              'http://127.0.0.1:8000/uploadfile/',
              param, config).then(res=>{
                console.log(res);

                //赋值操作
                this.src = 'http://127.0.0.1:8000/static/upload/' + res.data.filename
            })
          }
        }

    }
</script>

<style scoped>

</style>
